// .deigin-item-active{
//   position: relative;
//   // border: solid 1px blue;
//   // &:before{
//   //    position: absolute;
//   //    content: ' ';
//   //    width:calc( 100%);
//   //    border-radius: 4px;
//   //    height: calc( 100% + 4px);
//   //    border: solid 1px blue;
//   //    z-index: 9;

//   // }
//   // .design-toolbar{
//   //   display: block;

//   // }
// }
// .deigin-item {
//   // height: 100%;
// }
// .page-container-descrator{
//   position: relative;
//   cursor: move;
//   border: 1px dashed gray;
//   padding: 10px;

// }
// .page-container-descrator-active{
//   border: 1px solid transparent!important

// }
// .design-container-descrator{
//   padding: 10px;
//   position: relative;
//   cursor: move;
//   border: 1px dashed gray

// }
// .design-container-descrator-active{
//   // padding: 10px;
//   border: 1px solid transparent!important
// }

.design-toolbar {
  // display: none;
  // position: absolute;
  // pointer-events: none;
  // z-index: 9;
  // width: 100px;
  box-sizing:border-box;
  position:relative;
  padding:10;
  margin:2;
  // height: calc(100% - 1px);
  // width: calc(100%);
  // border: 1px solid blue;
  // border-radius: 4px;
  // right: ;
  // top: 0px;
  // left: 0px;
  // bottom: -10px;
  // top: -30px;
  color: white;
  .design-toolbar-actions {
    pointer-events: all;
    color: white;
    position: absolute;
    z-index: 999;
    background-color: white;
    right: -35px;
    top: 0px;
    padding: 8px;
    border-radius: 5px;
    width: 30px;
    display: flex;
    flex-direction: column;
    cursor: default;
    border: 1px solid #eee;
    span {
      cursor: pointer;
      margin-bottom: 5px;
      font-size: 16px;
      color: grey;
    }
  }
}
